<template>
  <view class="container">
    <!-- Custom Nav Bar -->
    <view
      class="custom-nav-bar"
      :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }"
    >
      <!-- 标题 -->
      <view class="title">{{ title }}</view>
    </view>

    <view
      class="custom-nav-bar"
      :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }"
    >
      <!-- 返回按钮 -->
      <image
        class="back-btn"
        @click="goBack"
        src="https://pic.hedashepin.com/upload/3/20250605/0594d533dba75e8bbcf7b13b9c42ee36.png"
      ></image>
    </view>

    <view v-if="isload">
      <!-- Main Content Area :style="{
          paddingTop: navHeight + 'px',
          paddingBottom: bottomBarHeight + 'px',
        }"-->
      <scroll-view
        scroll-y
        class="main-content"
        :style="{ paddingBottom: safebottom + bottomBarHeight + 'px' }"
      >
        <image
          class="content-image"
          :src="contentImageUrl"
          mode="widthFix"
        ></image>
      </scroll-view>

      <!-- Fixed Bottom Bar -->
      <view
        class="bottom-bar"
        :style="{
          paddingBottom: safebottom + 'px',
        }"
      >
        <view class="bottom-bar-content2" v-if="opt.status == 1">
          <view class="price-info">
            <text class="price-label">您已经开通成功</text>
          </view>
        </view>

        <view class="bottom-bar-content" v-else>
          <view class="price-info">
            <text class="price-label">开通限时价</text>
            <view class="price-line">
              <text class="current-price-flag">¥</text>
              <text class="current-price">{{ nextlevel.apply_paymoney }}</text>
              <text class="original-price">¥{{ sell_price }}</text>
            </view>
          </view>
          <button class="open-button" @tap="openMember">立即开通</button>
        </view>

        <!-- v-if="opt.status != 1" -->
        <view
          class="agreement-section"
          :style="{ opacity: opt.status != 1 ? 1 : 0 }"
        >
          <view
            class="select-icon-no"
            v-if="!agreement"
            @tap="agreement = true"
          >
          </view>
          <view class="select-icon" v-else @tap="agreement = false">
            <image src="/static/img/checkd.png" mode="aspectFit"></image>
          </view>
          <text :style="{ color: '#706F7A' }">我同意</text>
          <!-- <checkbox-group @change="isagreeChange">
            <label class="checkbox-label">
              <checkbox
                value="1"
                :checked="isagree"
                color="#B9A3FF"
                style="transform: scale(0.7)"
              />
              <text :style="{ color: '#706F7A' }">我同意</text>
            </label>
          </checkbox-group> -->
          <text class="agreement-link" @tap="showxieyiFun"
            >《和大会员服务协议》</text
          >
        </view>
      </view>
    </view>

    <!-- Agreement Modal (existing) -->
    <view
      id="xieyi"
      :hidden="!showxieyi"
      style="
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.7);
      "
    >
      <view
        style="
          width: 90%;
          margin: 0 auto;
          height: 85%;
          margin-top: 20%;
          background: #fff;
          color: #333;
          padding: 5px 10px 50px 10px;
          position: relative;
          border-radius: 2px;
        "
      >
        <view style="overflow: scroll; height: 100%">
          <parse :content="xieyi" />
        </view>
        <view
          class="closeXY"
          style="
            position: absolute;
            z-index: 9999;
            bottom: 10px;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
          "
          @tap="hidexieyi"
          >已阅读并同意</view
        >
      </view>
    </view>

    <!-- Popup Message -->
    <view
      class="popup-message"
      v-if="popmsg"
      style="
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.7);
      "
    >
      <view class="popup-content">
        <image
          class="popup-image"
          :src="popImageUrl"
          mode="widthFix"
          @tap="popPlay"
        ></image>
        <image
          class="popup-close"
          :src="popCloseIcon"
          mode="widthFix"
          @tap="popmsg = false"
        ></image>
      </view>
    </view>

    <loading v-if="loading"></loading>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      userinfo: [],
      userlevel: [],
      sysset: [],
      cardno: "",
      cardpwd: "",
      cardinfo: { id: 0 },
      hasnext: 0,
      nextlevel: {},
      _initdata: {},
      vipimg: "",
      isagree: false,
      showxieyi: false,
      xieyi: "",
      sell_price: "0.00",
      contentImageUrl:
        "https://pic.hedashepin.com/upload/3/20250605/2c0317b06763539a9f1a9d038fda691a.png",
      bottomBarHeight: 110, // Approximate height for bottom bar in px, adjust as needed

      popImageUrl:
        "https://pic.hedashepin.com/upload/3/20250605/47ad70a4cc8c833ab06f0abcfc8dba39.png",
      popCloseIcon:
        "https://pic.hedashepin.com/upload/3/20250529/cd84c271430cc30c332ce59bad53474c.png",
      popmsg: false,
      agreement: false,
      title: "会员中心",
      menuButtonInfo: {}, // 存储胶囊按钮位置信息
      navHeight: 44, // 导航栏内容高度（不包括状态栏）
      statusBarHeight: 20, // 状态栏高度
      safebottom: 20, //底部安全区
    };
  },
  onLoad: function (opt) {
    this.opt = app.getopts(opt);

    // #ifndef H5 || APP-PLUS || MP-ALIPAY
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 20;

    // 获取胶囊按钮信息（仅微信小程序）
    if (uni.getMenuButtonBoundingClientRect) {
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.menuButtonInfo = menuButtonInfo;
      // 计算导航栏高度 = 状态栏高度 + 胶囊按钮高度 + (胶囊按钮上边距 - 状态栏高度) * 2
      this.navHeight =
        menuButtonInfo.bottom + (menuButtonInfo.top - this.statusBarHeight);

      // 计算底部安全区高度（仅微信小程序）
      const safeArea = systemInfo.safeArea; // 安全区域信息
      const safeAreaInsets = systemInfo.safeAreaInsets; // 安全区域边距
      // console.log("底部安全距离:", safeAreaInsets.bottom);
      this.safebottom = safeAreaInsets.bottom;

      uni
        .createSelectorQuery()
        .select(".bottom-bar")
        .boundingClientRect((rect) => {
          if (rect) {
            this.bottomBarHeight = rect.height;
          }
        })
        .exec();
    } else {
      // 非微信小程序，使用默认高度
      this.navHeight = this.statusBarHeight + 44;
    }
    // #endif

    this.getdata();
  },
  // ... existing methods ...
  methods: {
    goBack() {
      app.goto("/pages/my/usercenter", "reLaunch");
    },
    // ... other methods like getdata, openMember, etc. remain the same ...
    getdata: function () {
      var that = this;
      that.loading = true;
      app.showLoading("加载中");
      app.post(
        "My/levelinfo",
        {
          // id: that.opt.id,
          needinit: 1,
          status: that.opt.status || null,
        },
        function (res) {
          that.loading = false;
          app.showLoading(false);
          if (res.status === 0 && res.msg) {
          }
          that.nextlevel = res.nextlevel || {};
          if (that.nextlevel && that.nextlevel.paymoneyxieyi) {
            that.xieyi = that.nextlevel.paymoneyxieyi;
          }
          that.userlevel = res.userlevel || {};
          if (that.userlevel) {
            that.contentImageUrl = that.userlevel.can_apply_level_pic;
            that.popImageUrl = that.userlevel.can_apply_level_pic_success;
            that.sell_price = that.userlevel.can_apply_level_sell_price;
            that.popmsg = that.opt.status == 1 ? true : false;
          }

          that.isload = true;
        }
      );
    },
    openMember: function () {
      var that = this;
      // if (!that.isagree) {
      //   app.alert("请先同意和大会员服务协议");
      //   return;
      // }

      if (that.opt.status == 1) {
        app.alert("您已经开通过了");
        return;
      }

      if (!that.agreement) {
        app.alert("请先同意服务协议");
        return;
      }
      if (!that.nextlevel || !that.nextlevel.id) {
        app.alert("会员信息获取失败，请稍后再试");
        return;
      }
      var formdata = {
        levelid: that.nextlevel.id,
      };
      app.showLoading("提交中");
      app.post("My/buyVip", formdata, function (res) {
        app.showLoading(false);
        if (res.status == 0) {
          app.alert(res.msg);
          return;
        }
        app.success(res.msg || "开通成功");
        setTimeout(function () {
          if (res.url) {
            app.goto(res.url);
          }
        }, 1000);
      });
    },
    isagreeChange: function (e) {
      var val = e.detail.value;
      this.isagree = val.length > 0;
    },
    showxieyiFun: function () {
      if (!this.xieyi) {
        app.alert("协议内容加载中，请稍候...");
        return;
      }
      this.showxieyi = true;
    },
    hidexieyi: function () {
      this.showxieyi = false;
      this.isagree = true;
    },
    popPlay: function () {
      this.popmsg = false;
      app.goto("/pages/shop/classify", "reLaunch");
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  // background-color: #0d0430;
  background-color: #0c1119;
  color: #ffffff;
}

.closeXY {
  background-color: #0d0430;
  color: #ffffff;
  font-size: 30rpx;
  width: 50vw;
  padding: 20rpx 0;
  border-top: 1px solid #fff;
  border-radius: 60rpx;
}

/* 自定义导航栏样式 */
.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  z-index: 999;
}

/* 返回按钮样式 - 与小程序胶囊对齐 */
.back-btn {
  margin-left: 24rpx;
  height: 32rpx;
  width: 32rpx;
}

/* 标题居中 */
.title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.main-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

.content-image {
  width: 100%;
  display: block;
}

/* Fixed Bottom Bar */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  z-index: 990;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center content if bar has fixed height */
  // padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.bottom-bar-content {
  display: flex;
  align-items: center; /* Align items vertically in the center */
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15rpx;
  background: linear-gradient(90deg, #392c61, #1e133b);
  border-radius: 68rpx;
  border: 4rpx solid #fff;
  padding: 16rpx;
}

.bottom-bar-content2 {
  display: flex;
  align-items: center; /* Align items vertically in the center */
  justify-content: center;
  width: 100%;
  margin-bottom: 15rpx;
  background: linear-gradient(90deg, #392c61, #1e133b);
  border-radius: 68rpx;
  border: 4rpx solid #fff;
  padding: 16rpx;
}

.price-info {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: 20rpx; /* Adjusted margin */
  gap: 10rpx;
}

.price-info2 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: 20rpx; /* Adjusted margin */
  gap: 10rpx;
}

.price-label {
  // font-size: 24rpx;
  // margin-bottom: 2rpx; /* Reduced margin */
}

.price-line {
  margin-bottom: 16rpx;
  display: flex;
  align-items: baseline; /* Align price and original price by baseline */
}

.current-price-flag {
  font-size: 24rpx;
  color: #fff;
  text-decoration: line-through;
}

.current-price {
  font-size: 44rpx; /* Slightly larger current price */
  // font-weight: bold;
  color: #fff;
  margin-right: 10rpx; /* Add some space between current and original price */
}

.original-price {
  font-size: 24rpx;
  color: #a093d0;
  text-decoration: line-through;
}

.open-button {
  background: linear-gradient(90deg, #b65eec, #8c0e99);
  color: #ffffff;
  font-size: 28rpx; /* Adjusted font size */
  font-weight: bold;
  border-radius: 40rpx;
  padding: 0 40rpx; /* Adjusted padding */
  height: 70rpx; /* Adjusted height */
  line-height: 70rpx;
  margin: 0;
}
.open-button::after {
  border: none;
}

.agreement-section {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx; /* Slightly smaller agreement text */
  color: #b9a3ff;
  width: 100%;
}

.checkbox-label {
  display: flex;
  align-items: center;
  margin-right: 5rpx;
}
.checkbox-label text {
  margin-left: -5rpx;
}

.select-icon-no {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.select-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  background-color: #927cf1;
  border-radius: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.agreement-link {
  color: #d0c0ff;
}

.popup-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .popup-image {
    width: 90%;
  }
  .popup-close {
    width: 80rpx;
    height: 80rpx;
    margin: 5rpx;
  }
}
</style>
